<!--
表达式组件
-->

<template>
  <el-popover v-model="popover" @show="show" placement="left"  width="400" trigger="click">
    <el-form size="mini">
      <el-form-item label="表达式">
        <el-input type="textarea" v-model="input"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="confirm" type="primary">保存表达式</el-button>
        <el-button v-if="canReset" @click="reset">恢复初始化</el-button>
      </el-form-item>
    </el-form>
    <i slot="reference" class="mc-exp" :title="isExp?'表达式模式：写错有可能渲染失败，可以按住Ctrl+z回退':'请以非表达式输入'" :style="{color:expStyle}">Exp</i>
  </el-popover>
</template>

<script>
export default {
  name: 'mc-exp',
  data () {
    return {
      input:"",
      popover:false,
      isExp:false,
      initValue:null
    }
  },
  props:{
    'value' : {type:Boolean,default:undefined},
    /*属性名*/
    'attrName':{type:String,default:""},
    /*节点属性对象 最好是一个拷贝的对象*/
    'nodeAttr':{type:Object,default:null},

    /*要控制的值*/
    'data':{
      type:[String,Number,Boolean],default:null
    },
    'canReset':{type:Boolean,default:true}

  },
  computed:{
    //v-model暂时无用 先不抛出去了
    /*isExp:{
      get(){
        if(typeof this.value!='undefined'){
          return this.value;
        }
        return this.dv;
      },
      set(v){
        this.$emit("input",v)
      }
    },*/
    expStyle:function () {
      return this.isExp?"#307AFF":""
    }
  },
  watch:{
      data(v){
        this.setAttrValue(this.isExp,v);
      }
  },
  mounted () {
    var attrName = this.attrName;
    this.initialValue = JSON.parse(JSON.stringify({data:this.data})).data;
    this.isExp = this.attrName.startsWith(":");

    //智能纠正下
    if(attrName.startsWith(":")){
      if(this.nodeAttr[attrName.substr(1)] && !this.nodeAttr[attrName]){
        this.isExp = false;
      }
      if(this.nodeAttr[attrName]||this.nodeAttr[attrName.substr(1)]){
        this.setData(this.nodeAttr[attrName]||this.nodeAttr[attrName.substr(1)])
      }
    }else{
      if(!this.nodeAttr[attrName]&&this.nodeAttr[":"+attrName]){
        this.isExp = true;
      }
      if(this.nodeAttr[attrName]||this.nodeAttr[":"+attrName]){
        this.setData(this.nodeAttr[attrName]||this.nodeAttr[":"+attrName])
      }
    }
  },
  methods:{
    setData(v){
      this.$emit("update:data",v)
    },
    getAttrName(){
      if(this.attrName.startsWith(":")){
        return this.attrName.substr(1)
      }
      return this.attrName;
    },
    show(){
      this.input = this.data+"";
    },
    confirm(){
      this.isExp = true;
      var cleanAttrName = this.getAttrName();
      this.nodeAttr[cleanAttrName]="";
      this.nodeAttr[":"+cleanAttrName] = this.input;
      this.setData(this.input)
      this.popover = false;
    },
    reset(){
      var cleanAttrName = this.getAttrName();
      this.nodeAttr[cleanAttrName]="";
      this.nodeAttr[":"+cleanAttrName]="";
      this.setData(this.initialValue)
      this.isExp = this.attrName.startsWith(":");
      this.popover = false;
    },
    setAttrValue(exp,v){
      var cleanAttrName = this.getAttrName();
      if(exp){
        this.nodeAttr[cleanAttrName]="";
        this.nodeAttr[":"+cleanAttrName]=v+"";
      }else {
        this.nodeAttr[cleanAttrName]=v+"";
        this.nodeAttr[":"+cleanAttrName]="";
      }
    },
    setExp(exp,val){
      this.isExp = exp;
      this.setAttrValue(exp,val)
      this.setData(val)

    }
  }
}
</script>

<style lang="scss">
.mc-exp {
  cursor:pointer;
}

</style>
